<template>
  <div class="myhouses">
    <div class="bg">
      <van-nav-bar
        left-arrow
        title="我的房屋"
        @click-left="$router.go(-1)"
        fixed
      />

      <span class="nav-bar">添加我的房产</span>

      <div class="add-house">
        <div class="add-box" @click="addHouse">
          <svg-icon
            icon-class="我的房屋-添加房产边框"
            widthW="8.93333rem"
            heightH="2.66667rem"
          >
          </svg-icon>
          <span>
            <svg-icon
              icon-class="我的房屋-添加房产"
              widthW="1.6rem"
              heightH="1.6rem"
            ></svg-icon>
          </span>
          <span>添加房产</span>
        </div>
      </div>

      <span class="nav-bar_bind">已绑定的房产</span>

      <div class="bound-house">
        <template v-if="boundHouse.length">
          <van-cell
            v-for="item in boundHouse"
            :key="item.id"
            is-link @click="houseDetail(item)"
            :value="
              `${item.neighborhoodName}`
            "
          />
        </template>

        <template v-else>
          <span class="no-record">暂无记录</span>
        </template>
      </div>
    </div>
  </div>
</template>

<script>
import houseService from "@/controller/myhouse.js";
import constant from "@/controller/constant.js";
export default {
  components: {},
  props: {},
  data() {
    return {
      boundHouse: [],
      userId: null
    };
  },
  mounted() {
    this.userId = JSON.parse(localStorage.getItem("userInfo")).currentUser.id;
    this.getBoundHouseList(this.userId);
  },
  methods: {
    getBoundHouseList(id) {
      houseService.community_user_house_user(id).then(res => {
        if (res.code === "0") {
          if (!res.datas.length) {
            this.$toast("暂无绑定房屋");
            return;
          }
          this.boundHouse = res.datas;
        } else {
          if (res && res.msg) {
            this.$toast(res.msg);
          } else {
            this.$toast(constant.unusualMsg);
          }
        }
      });
    },
    houseDetail(val) {
      houseService.community_house_by_user_id(val.id).then(res => {
        if (res.code === "0") {
          this.$router.push({ name: 'houseDetail', query: {data: res.datas, id: val.id} })
        } else {
          if (res && res.msg) {
            this.$toast(res.msg);
          } else {
            this.$toast(constant.unusualMsg);
          }
        }
      })
    },
    addHouse() {
      this.$router.push({
        name: "boundHouses"
      });
    },
    viewDetail() {
      this.$toast("查看房产详情");
    }
  }
};
</script>

<style lang="scss" scoped>
.myhouses {
  width: 100%;
  height: 100%;
  position: fixed;
  background: #f5f7fa;
  margin: -46px 0 0;

  .bg {
    background: #fff;

    .nav-bar {
      text-align: left;
      padding-left: 15px;
      font-size: 16px;
      font-weight: 600;
      color: #303133;
      display: inline-block;
      margin: 10px 0;
      margin-top: 1.5rem;
    }

    .nav-bar_bind {
      text-align: left;
      padding-left: 15px;
      font-size: 16px;
      font-weight: 600;
      color: #303133;
      display: inline-block;
      margin: 10px 0;
    }

    .add-house {
      height: 100px;
      width: 100%;
      padding: 0 20px;
      margin-top: 10px;
      margin-bottom: 20px;
      box-sizing: border-box;

      .add-box {
        position: relative;

        span {
          font-size: 19px;
          color: #1b315e;
          letter-spacing: 0;
        }

        span:nth-child(2) {
          position: absolute;
          top: 20px;
          left: 70px;
        }

        span:nth-child(3) {
          position: absolute;
          top: 37px;
          left: 150px;
        }
      }
    }

    .bound-house {
      padding: 0 15px;
      text-align: center;

      .van-cell {
        text-align: left;
        border-bottom: 1px solid #edeff2;
        padding: 15px 0;

        &:not(:last-child)::after {
          border-bottom: none;
        }

        span {
          font-size: 14px;
          color: #333333;
        }

        &:last-child {
          border-bottom: none;
        }
      }

      .no-record {
        font-size: 14px;
        color: #999999;
        letter-spacing: 0;
        display: inline-block;
        margin-top: 10px;
        margin-bottom: 15px;
      }
    }
  }
}
</style>
